<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 背景</title>
    <style type="text/css">

        /*
        repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，
        no-repeat 则不允许图像在任何方向上平铺。
        */
        /*body{*/
            /*background-image: url("../images/bg.jpg");*/
            /*background-repeat: repeat-y;*/
        /*}*/


        /*p{*/
            /*background-color: gray;*/
        /*}*/

        /* 希望背景色 从元素的文本向外少有延伸 增加一些内边距 */
        /*p{*/
            /*background-color: gray;*/
            /*padding: 20px;*/
        /*}*/
        /* 可以为所有的原色设置 background-color 不能继承,默认值是 transparent 透明 这样不会遮挡父元素的背景 */
        /*  background-image 设置相关的 背景的图片 */
        /*p.flower{*/
            /*background-image: url("../images/sun.jpg");*/
            /*padding: 20px;*/
        /*}*/
        a.radio{
            background-image: url("../images/eg_merglobe.gif");
            padding: 20px;
        }
        .test{
            width: 100%;
            height: 300px;
            background-image: url("../images/bg.jpg");
            background-repeat: no-repeat;
            background-position: center; /* background-position 属性提供值有很多方法。首先，
                                            可以使用一些关键字：top、bottom、left、right 和 center。*/
        }

        /*   实际上 无论是 图片还是文字都没有填满 */
        .keywords{
            /*width: 100%;*/
            /*height: 300px;*/
            height: 500px;
            background-image:url('../images/sun.jpg');
            background-repeat:no-repeat;
            background-position:top;
        }

        .bottomKeywords{
            height: 500px;
            background-image:url('../images/sun.jpg');
            background-repeat:no-repeat;
            background-position:bottom;
        }

        /*  实际上设置的 有些  position 属性 并没有产生作用  */
        .div-keywords{
            height: 300px;
            background-image:url('../images/sun.jpg');
            background-repeat:no-repeat;
            background-position:top;
        }

        .percentPosition{
            background-image:url('../images/sun.jpg');
            background-repeat:no-repeat;
            background-position:50% 50%;
        }

        .position{
            height: 500px;
            background-image:url('../images/sun.jpg');
            background-repeat:no-repeat;
            background-position:50px 100px;
        }

        /*  背景关联 */
        /* 如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
           您可以通过 background-attachment 属性防止这种滚动。通过这个属性，
           可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：*/

        /*body{*/
            /*background-image: url("../images/bg.jpg");*/
            /*background-repeat: no-repeat;*/
            /*background-attachment: fixed;*/
        /*}*/

        /* 我们对比 测试 body 和 attachmentFixed的 显示*/
        .attachmentFixed{
            background-image: url("../images/bg.jpg");
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

        /* 这两个 对比了图片的显示效果 */
        .allBgInOne{
            background: #ff0000 url("../images/bg.jpg") no-repeat fixed center;
        }


    </style>
</head>
<body>
    <!--<h2>CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果 这方面能力远在HTML之上</h2>-->
    <!--<p></p>-->
    <!--<p>这是一个段落</p>-->
    <!--<p class="flower">这是一个设置了背景图片的段落<a class="radio" href="#">这是一个设置了背景图片的a元素</a></p>-->
    <!--&lt;!&ndash; 测试背景重复 background-repeat 属性 &ndash;&gt;-->
    <!--<div class="test">-->
    <!--</div>-->
    <!--<p class="keywords">-->
        <!--this a test img and text-->
    <!--</p>-->
    <!--<p class="bottomKeywords">-->
        <!--this a bottom key words text-->
    <!--</p>-->
    <!--<div class="div-keywords">-->
        <!--this is div test img and text-->
    <!--</div>-->
    <!--<p class="percentPosition">-->
        <!--this is percent position-->
    <!--</p>-->
    <!--<p class="position">-->
        <!--this is position-->
    <!--</p>-->
    <div class="attachmentFixed">
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
    </div>
    <div class="allBgInOne">
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
        <p>图像不会随页面的其余部分滚动。</p>
    </div>
</body>
</html>